<template>
    <div>
        <div style="margin-top:30px;margin-bottom: 30px">待处理：</div>
        <el-table
                :data="tableData_1"
                border
                style="width: 75%">
            <el-table-column
                    prop="name"
                    label="培训项目名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="train_location"
                    label="培训地点"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="train_time"
                    label="培训时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="trainee"
                    label="培训对象"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="操作"
                    width="240">
                <template slot-scope="scope">
                    <el-button type="primary" @click="open_1(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :title="train.title"
                :visible.sync="dialogVisible_1"
                width="50%"
                >
            <el-dialog
                    width="30%"
                    title="内层 Dialog"
                    :visible.sync="innerVisible"
                    append-to-body>
                <div>
                    <div>不通过原因</div>
                    <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit"
                              v-model="reason"
                              placeholder="请输入不通过问题"></el-input>
                    <el-button type="primary" @click="innerVisible=false">取消</el-button>
                    <el-button type="primary" @click="ChangeTrainStatus_2">确定</el-button>

                </div>
            </el-dialog>
            <div>
                <div style="font-weight: 800;font-size: 18px">
                    <div style="font-size: 30px">培训名称：{{train.name}}</div>
                    <div  style="margin-top: 20px">培训对象：{{train.trainee}}</div>
                    <div style="margin-top: 20px">培训内容：{{train.content}}</div>
                    <div style="margin-top: 20px">培训时间：{{train.train_time}}</div>
                    <div style="margin-top: 20px">培训地点：{{train.train_location}}</div>
                    <div style="margin-top: 20px">培训要求：{{train.requirement}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="notAllowTrain">不通过</el-button>
    <el-button type="primary" @click="ChangeTrainStatus_1">通过</el-button>
  </span>
        </el-dialog>
        <div style="margin-left: 130px;margin-top: 20px">
        <el-pagination
                backgroundx
                :page-size="size"
                @current-change="currentChange_1"
                layout="total,prev, pager, next,jumper"
                :total="total_1">
        </el-pagination>
        </div>



        <div style="margin-bottom:30px;margin-top: 100px">已处理：</div>
        <el-table
                :data="tableData_2"
                border
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="培训项目名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="train_location"
                    label="培训地点"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="train_time"
                    label="培训时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="trainee"
                    label="培训对象"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">

                <template slot-scope="scope">
                    <el-tag  v-if="scope.row.status===1"
                             type="success">已通过
                    </el-tag>
                    <el-tag  v-if="scope.row.status===2"
                             type="danger">未通过
                    </el-tag>
                </template>

            </el-table-column>
            <el-table-column
                    prop="status"
                    label="操作"
                    width="240">
                <template slot-scope="scope">
                    <el-button type="primary" @click="open_2(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :title="train.title"
                :visible.sync="dialogVisible_2"
                width="50%"
               >
            <div>
                <div style="font-weight: 800;font-size: 18px">
                    <div style="font-size: 30px">培训名称：{{train.name}}</div>
                    <div  style="margin-top: 20px">培训对象：{{train.trainee}}</div>
                    <div style="margin-top: 20px">培训内容：{{train.content}}</div>
                    <div style="margin-top: 20px">培训时间：{{train.train_time}}</div>
                    <div style="margin-top: 20px">培训地点：{{train.train_location}}</div>
                    <div style="margin-top: 20px">培训要求：{{train.requirement}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">

  </span>
        </el-dialog>
        <div style="margin-left: 130px;margin-top: 20px">
            <el-pagination
                    background
                    :page-size="size"
                    @current-change="currentChange_2"
                    layout="total,prev, pager, next,jumper"
                    :total="total_2">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "train_review",
        data(){
            return{
                value2:true,
                reason:'',
                page:1,
                size:5,
                train_record:{},
                tags:[],
                innerVisible:false,
                dialogVisible_1:false,
                dialogVisible_2:false,
                trains:[],
                train:{},
                total_1:0,
                total_2:0,
                tableData_1: [],
                tableData_2: [],
            }
        },
        methods:{
            currentChange_1(currentPage){
                this.initData_1(currentPage);
            },
            currentChange_2(currentPage){
                this.initData_2(currentPage);
            },
            initData_1(page) {
                this.getRequest('/train/getTrain_0?status_id_1=' + 0+'&page='+page).then(resp => {
                    console.log(resp)
                    this.tableData_1 = resp.data
                    this.total_1 = resp.total

                })
            },
                initData_2(page){
                this.getRequest('/train/getTrain_0?status_id_1='+1+'&page='+page).then(resp=>{
                    this.tableData_2=resp.data
                    this.total_2=resp.total
                })
            },
            notAllowTrain(){

                this.innerVisible = true
            },
            //外层dialog
            ChangeTrainStatus_1(){
                this.innerVisible=false;
                this.train.status=1
                console.log(this.train)
                this.putRequest('/train/changeStatus',this.train).then(resp=>{
                    this.initData_2(1)
                    this.initData_2(1)
                })

                this.dialogVisible_1=false;
            },
            //内层dialog
            ChangeTrainStatus_2(){
                this.train_record.train_id=this.train.id
                this.train_record.reason=this.reason
                this.postRequest('/trainrecord/notallowtrain',this.train_record).then(resp=>{
                    console.log(resp)
                })
                this.train.status=2
                console.log(this.train)
                this.putRequest('/train/changeStatus',this.train).then(resp=>{

                })
                this.innerVisible=false;
                this.dialogVisible_1=false;
                this.train_record={}
                this.initData_1(1)
                this.initData_2(1)


            },
            doAddTrain(){
                this.postRequest('/train/',this.train).then(resp=>{
                    console.log(resp)
                })
                this.dialogVisible_1=false;
            },
            open_1(data){
                this.train=data
                this.dialogVisible_1=true;

            },
            open_2(data){
                this.train=data
                this.dialogVisible_2=true;

            },

        },
        mounted() {
            this.initData_1(1);
            this.initData_2(1);
        }
    }
</script>

<style scoped>

</style>
